<template>
	<view>
		<view v-if="isShowDatePicker" >
			<mask-layer>
				<good-date-picker ref="goodDatePicker" @close="closeDatePicker" @change="changeDate" :option="goodDatePickerOption"></good-date-picker>
			</mask-layer>
		</view>
		<view class="tab">
			<view class="u-f-jse">
				<view>全部</view>
				<view @tap="toggleShowDate">选择时间
				</view>
				<view>变电站</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodDatePicker from "../../components/good-date-picker/good-date-picker.vue"
	import maskLayer from "../../components/common/mask-layer.vue"
	export default {
		data() {
			return {
				goodDatePickerOption:{
				    // chooseOneDate: "2019-12-26", //根据实际业务需求设置的默认单选日期，可为空,默认今天
				    initStartDate: '2019-12-26', //可选起始时间限制，可为空,默认今天
				    // initEndDate: '2020-06-08', //可选结束时间限制，可为空,默认4个月后
				    isRange: false ,//是否开启范围选择，必填
					isShowSubmit:true,
				},
				isShowDatePicker:false
			};
		},
		methods:{
			
			//日期选择
			changeDate(e) { //单选择完日期回调，
				this.currentDate=e.currentDate;//单选模式下返回当前选择的日期
				this.startDate=e.startDate;//区间选择模式下返回当前选择的开始日期
				this.endDate=e.endDate;//区间选择模式下返回当前选择的结束日期
				this.dateNum=e.dateNum;//区间选择模式下返回的开始于结束日期的天数
			},
			openDate() { //打开日期弹窗
				this.$refs.goodDatePicker.open();
			},
			closeDatePicker() {
				this.isShowDatePicker = false
			},
			toggleShowDate() {
				this.isShowDatePicker = !this.isShowDatePicker
			}
		},
		components:{GoodDatePicker,maskLayer}
	}
</script>

<style lang="less">
	.tab{
		width: 100%;
		height: 62rpx;
		position: absolute;
		top: 0;
		// z-index: 2000;
		background: #FFFFFF;
	}
</style>
